<template>
	<view class="message-wrapper">
		<custom-header-bar bg="1" title="消息"></custom-header-bar>
		<div class="container">
			<div v-if="messageList===''">
				<empty-loading type="loading" text="正在加载..."></empty-loading>
			</div>
			<div v-else-if="messageList.length===0">
				<u-empty text="暂无系统通知" mode="message"></u-empty>
			</div>
			<div class="message-list" v-else>
				<div class="item" v-for="(item,index) in messageList" @click="messagfeDetail(item)">
					<div class="title">
						<div class="name">
							<span class="text"
								:class="{'unread-text':item.readUnread==='unread'}">{{item.title||''}}</span>
							<div>{{item.createTime||''}}</div>
						</div>
						<div class='content-box'>
							<!-- 		<image v-if="item.readUnread==='unread'" class="unread" src="/static/menu-notice.png">
							</image> -->
							<!-- <image class="unread" src="/static/menu-notice.png">
							</image> -->
							<p class="content">
								{{item.content||''}}
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<custom-tab-bar selected="3"></custom-tab-bar>
	</view>

</template>

<script>
	import {
		getPrewarnList
	} from "@/api/message.js"
	export default {
		data() {
			return {
				messageList: []
			}
		},
		onLoad() {
			return
			setTimeout(() => {
				uni.hideTabBar({
					complete(res) {
						console.log(res)
					}
				})
			}, 300)
			this.initParams()
			this.initData()
		},
		onShow() {
			uni.hideTabBar()
			this.initData()
		},
		onReachBottom() {
			this.continueLoad()
		},
		methods: {
			continueLoad() {
				this.pageNum += 1
				this.initData()
			},
			initData() {
				if (this.finish) return
				getPrewarnList({
					pageSize: this.pageSize,
					pageNum: this.pageNum
				}).then((res) => {
					console.log("666666666", res)
					this.messageList = this.messageList || []
					this.messageList = [...this.messageList, ...res.data.result.records]
					if (res.data.result.records.length < 10) {
						this.finish = true
					}
					uni.stopPullDownRefresh()
				})
			},
			initParams() {
				this.messageList = ''
				this.finish = false
				this.pageSize = 10
				this.pageNum = 1
			},
			messagfeDetail(item) {
				item.readUnread = 'read'
				uni.navigateTo({
					url: "/pages/messsage/details/index?id=" + item.msgId
				})
			},
		},
		onPullDownRefresh() {
			this.initParams();
			this.initData();
		},
		computed: {

		},

	}
</script>

<style lang="scss">
	.message-wrapper {
		// padding: 160upx 0 120upx 0;
		min-height: 100%;

		.container {
			box-sizing: border-box;
			// padding: 24upx;
			margin-top: 20upx;

			.message-list {

				.item {
					padding: 30upx;
					margin-top: 24upx;
					background: #FFFFFF;
					// border-radius: 30upx;
					box-sizing: border-box;

					.title {
						// background: olive;
						// display: flex;
						// justify-content: space-between;
						// word-break: keep-all;

						.name {
							display: flex;
							justify-content: space-between;
							align-items: center;
							word-break: keep-all;
							margin-bottom: 20upx;

							.text {
								font-size: 30upx;
								font-weight: 700;
							}

						}

						.content-box {
							height: 100%;
							// display: flex;
							border-radius: 30upx;
							background-color: rgba(245, 245, 245, 1);
							// justify-content: left;
							// align-items: center;

							// .unread {
							// 	// position: relative;
							// 	// top: -12upx;
							// 	// left: 12upx;
							// 	width: 126rpx;
							// 	height: 126rpx;
							// 	border-radius: 16upx 0upx, 0upx, 16upx;
							// }

							.content {
								color: rgba(141, 141, 141, 1);
								font-size: 28upx;
								// white-space: nowrap;
								// text-overflow: ellipsis;
								// overflow: hidden;
								// word-break: break-all;
								padding: 30upx 30upx;
								line-height: 40upx;
							}
						}
					}
				}
			}

			.item:nth-child(1) {
				margin-top: 0;
			}

		}
	}
</style>
